<!--
  布局容器 示例
  @author 邵鹏坤 2022年9月22日
  参考window11 桌面
  1 在此处整合桌面图标组件（navBar）&任务栏组件（taskBar）
  2 数据源：
    使用props从使用者（父组件）接受所有的导航列表，用于渲染桌面图标组件（数量，路由，图标，导航名）
-->
<template>
  <div class="example-container">
    <ExampleTitle title="按钮组件示例"></ExampleTitle>
    <ExampleTitle title="常规用法" :row="true"></ExampleTitle>
    <div class="row-container">
      <Button>默认按钮</Button>
      <Button type="primary">primary</Button>
      <Button type="success">success</Button>
      <Button type="danger">danger</Button>
      <Button type="warning">warning</Button>
    </div>
    <MD file-name="commonButton"></MD>
    <ExampleTitle title="禁用状态" :row="true"> </ExampleTitle>
    <div class="row-container">
      <Button :disabled="true">默认按钮</Button>
      <Button type="primary" :disabled="true">primary</Button>
      <Button type="success" :disabled="true">success</Button>
      <Button type="danger" :disabled="true">danger</Button>
      <Button type="warning" :disabled="true">warning</Button>
    </div>
    <MD file-name="disabledButton"></MD>
    <ExampleTitle title="文字状态" :row="true"> </ExampleTitle>
    <div class="row-container">
      <Button :text="true">默认按钮</Button>
      <Button type="primary" :text="true">primary</Button>
      <Button type="success" :text="true">success</Button>
      <Button type="danger" :text="true">danger</Button>
      <Button type="warning" :text="true">warning</Button>
      <p class="row-msg">禁用状态</p>
      <Button :disabled="true" :text="true">默认按钮</Button>
      <Button type="primary" :disabled="true" :text="true">primary</Button>
      <Button type="success" :disabled="true" :text="true">success</Button>
      <Button type="danger" :disabled="true" :text="true">danger</Button>
      <Button type="warning" :disabled="true" :text="true">warning</Button>
    </div>
    <MD file-name="textButton"></MD>
    <ExampleTitle title="自定义颜色" :row="true"></ExampleTitle>
    <div class="row-container">
      <Button color="#3d2085" type="custom">自定义按钮1</Button>
      <Button color="#8a1e93" type="custom">自定义按钮2</Button>
      <Button color="#c33991" type="custom">自定义按钮3</Button>
      <Button color="#35b39b" type="custom">自定义按钮4</Button>
      <Button color="#35b39b" type="custom" :disabled="true">自定义按钮4-disabled</Button>
    </div>
    <MD file-name="customButton"></MD>
    <ExampleTitle title="图标按钮" :row="true"> </ExampleTitle>
    <div class="row-container">
      <Button icon="icon-A"></Button>
      <Button type="primary" icon="icon-A3">主要按钮</Button>
      <Button type="success" icon="icon-A7" :text="true">文字按钮</Button>
      <Button type="danger" icon="icon-guanbitongzhi" :disabled="true">禁用状态</Button>
      <Button type="custom" color="#c33991" icon="icon-A1">自定义颜色</Button>
    </div>
    <MD file-name="iconButton"></MD>
    <ExampleTitle title="调整尺寸" :row="true"> </ExampleTitle>
    <div class="row-container">
      <Button icon="icon-A" size="small"></Button>
      <Button type="success" icon="icon-A7" :text="true" size="small">small</Button>
      <Button type="danger" icon="icon-guanbitongzhi" :disabled="true">default</Button>
      <Button type="primary" icon="icon-A3" size="bigger">bigger</Button>
    </div>
    <MD file-name="sizeButton"></MD>
  </div>
</template>

<script setup lang="ts">
  import MD from '@/views/components/md.vue'
  import ExampleTitle from '@/views/components/exampleTitle.vue'
  import Button from './components/button.vue'
</script>

<style lang="scss">
  .--win-button {
    margin: 10px 12px !important;
  }
  .row-msg {
    margin: 8px 12px;
  }
</style>
